<script setup lang="ts">
import * as echarts from "echarts"
import { onMounted, reactive, ref } from "vue"

import { useorderStatic } from '@/stores/orderStatic'

const _orderList = useorderStatic()
const staticList = ref([])

onMounted(async () => {
    await _orderList.getorderList()
    staticList.value = _orderList.orderStatic
    getOrderListMain("today")
    getOrderListOrder("today")
})

const getOrderListMain = async (time: String) => {
    type EChartsOption = echarts.EChartsOption;

    var chartDom = document.getElementById("main")!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
        title: {
            text: '订单走势图（单）'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: []
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '订单数',
                color: '#73c0de',
                type: 'line',
                stack: 'Total',
                label: {
                    show: true,
                    position: 'top'
                },
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: []
            }
        ]
    };
    if (time == "0") {
        var key = ['2022-11-01', '2022-11-03', '2022-11-05', '2022-11-07', '2022-11-09', '2022-11-11']
        var val = [122, 320, 380, 430, 230, 310]
    } else if (time == "today") {
        var key = ['0-4时', '4-8时', '8-12时', '12-16时', '16-20时', '20-24时']
        let v = test("today")
        var val = [v.dayOne, v.dayTwo, v.dayThree, v.dayFour, v.dayFive, v.daySix]
    } else if (time == "yesterday") {
        var key = ['0-4时', '4-8时', '8-12时', '12-16时', '16-20时', '20-24时']
        let v = test("yesterday")
        var val = [v.dayOne, v.dayTwo, v.dayThree, v.dayFour, v.dayFive, v.daySix]
    } else if (time == "week") {
        var key = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        var val = [121, 123, 234, 188, 231, 239, 322]
    } else if (time == "preweek") {
        var key = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        var val = [178, 163, 219, 431, 248, 388, 321]
    } else if (time == "month") {
        var key = ['第一周', '第二周', '第三周', '第四周', '第五周']
        var val = [899, 788, 709, 898, 901, 877]
    } else if (time == "premonth") {
        var key = ['第一周', '第二周', '第三周', '第四周', '第五周']
        var val = [789, 988, 809, 898, 931, 977]
    }

    option.xAxis[0].data = [...key]
    option.series[0].data = [...val]
    option && myChart.setOption(option);
}

const getOrderListOrder = async (time: String) => {

    var chartDom = document.getElementById("order")!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
        title: {
            text: '营业额走势图（元）'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: []
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '营业额',
                color: '#fac858',
                type: 'line',
                stack: 'Total',
                label: {
                    show: true,
                    position: 'top'
                },
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: []
            }
        ]
    };

    if (time == "0") {
        var key = ['2022-11-01', '2022-11-03', '2022-11-05', '2022-11-07', '2022-11-09', '2022-11-11']
        var val = [122, 320, 380, 430, 230, 310]
    } else if (time == "today") {
        var key = ['0-4时', '4-8时', '8-12时', '12-16时', '16-20时', '20-24时']
        let v = test("today")
        var val = [v.dayOne * 500, v.dayTwo * 500, v.dayThree * 500, v.dayFour * 500, v.dayFive * 500, v.daySix * 500]
    } else if (time == "yesterday") {
        var key = ['0-4时', '4-8时', '8-12时', '12-16时', '16-20时', '20-24时']
        let v = test("yesterday")
        var val = [v.dayOne * 500, v.dayTwo * 500, v.dayThree * 500, v.dayFour * 500, v.dayFive * 500, v.daySix * 500]
    } else if (time == "week") {
        var key = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        var val = [121, 123, 234, 188, 231, 239, 322]
    } else if (time == "preweek") {
        var key = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        var val = [178, 163, 219, 431, 248, 388, 321]
    } else if (time == "month") {
        var key = ['第一周', '第二周', '第三周', '第四周', '第五周']
        var val = [899, 788, 709, 898, 901, 877]
    } else if (time == "premonth") {
        var key = ['第一周', '第二周', '第三周', '第四周', '第五周']
        var val = [789, 988, 809, 898, 931, 977]
    }
    option.xAxis[0].data = [...key]
    option.series[0].data = [...val]
    option && myChart.setOption(option);
}

const today = () => {
    getOrderListMain("today")
    getOrderListOrder("today")
}

const yesterday = () => {
    getOrderListMain("yesterday")
    getOrderListOrder("yesterday")
}

const week = () => {
    getOrderListMain("week")
    getOrderListOrder("week")
}

const preweek = () => {
    getOrderListMain("preweek")
    getOrderListOrder("preweek")
}

const month = () => {
    getOrderListMain("month")
    getOrderListOrder("month")
}

const premonth = () => {
    getOrderListMain("premonth")
    getOrderListOrder("premonth")
}

const test = (time: String) => {
    const optionObj = reactive({
        dayOne: 0,
        dayTwo: 0,
        dayThree: 0,
        dayFour: 0,
        dayFive: 0,
        daySix: 0,
    })

    staticList.value.sort(function (a, b) {
        return a.time.split(' ')[1].split(':')[0] - b.time.split(' ')[1].split(':')[0]
    })
    if (time == "today") {
        staticList.value.forEach((item) => {
            if ((item.time.split(' ')[0].split('-')[2]) * 1 == (String(new Date(Date.now()).getDate()).padStart(2, "0")) * 1) {
                if (item.time.split(' ')[1].split(':')[0] * 1 >= 0 && item.time.split(' ')[1].split(':')[0] * 1 < 4) {
                    optionObj.dayOne++
                    return
                } else if (item.time.split(' ')[1].split(':')[0] * 1 >= 4 && item.time.split(' ')[1].split(':')[0] * 1 < 8) {
                    optionObj.dayTwo++
                    return
                } else if (item.time.split(' ')[1].split(':')[0] * 1 >= 8 && item.time.split(' ')[1].split(':')[0] * 1 < 12) {
                    optionObj.dayThree++
                    return
                } else if (item.time.split(' ')[1].split(':')[0] * 1 >= 12 && item.time.split(' ')[1].split(':')[0] * 1 < 16) {
                    optionObj.dayFour++
                    return
                } else if (item.time.split(' ')[1].split(':')[0] * 1 >= 16 && item.time.split(' ')[1].split(':')[0] * 1 < 20) {
                    optionObj.dayFive++
                    return
                } else if (item.time.split(' ')[1].split(':')[0] * 1 >= 20 && item.time.split(' ')[1].split(':')[0] * 1 < 24) {
                    optionObj.daySix++
                    return
                }
            }
        })
    } else if (time == "yesterday") {
        staticList.value.forEach((item) => {
            if ((item.time.split(' ')[0].split('-')[2]) * 1 == ((String(new Date(Date.now()).getDate()).padStart(2, "0")) * 1) - 1) {
                if (item.time.split(' ')[1].split(':')[0] * 1 >= 0 && item.time.split(' ')[1].split(':')[0] * 1 < 4) {
                    optionObj.dayOne++
                    return
                } else if (item.time.split(' ')[1].split(':')[0] * 1 >= 4 && item.time.split(' ')[1].split(':')[0] * 1 < 8) {
                    optionObj.dayTwo++
                    return
                } else if (item.time.split(' ')[1].split(':')[0] * 1 >= 8 && item.time.split(' ')[1].split(':')[0] * 1 < 12) {
                    optionObj.dayThree++
                    return
                } else if (item.time.split(' ')[1].split(':')[0] * 1 >= 12 && item.time.split(' ')[1].split(':')[0] * 1 < 16) {
                    optionObj.dayFour++
                    return
                } else if (item.time.split(' ')[1].split(':')[0] * 1 >= 16 && item.time.split(' ')[1].split(':')[0] * 1 < 20) {
                    optionObj.dayFive++
                    return
                } else if (item.time.split(' ')[1].split(':')[0] * 1 >= 20 && item.time.split(' ')[1].split(':')[0] * 1 < 24) {
                    optionObj.daySix++
                    return
                }
            }
        })
    }
    return optionObj
}

</script>

<template>
    <n-layout>
        <n-layout-header>销售简报</n-layout-header>
        <n-layout-content class="layout_content">
            <n-row gutter="12">
                <n-col :span="18">
                    <n-row gutter="12">
                        <n-col :span="3">
                            <div class="light-green">
                                <span>付款时间：</span>
                            </div>
                        </n-col>
                        <n-col :span="2" class="jinri">
                            <div class="xxJB">
                                <n-button text="true" @click="today"> 今日 </n-button>
                            </div>
                        </n-col>
                        <n-col :span="2">
                            <div class="light-xxJB">
                                <n-button text="true" @click="yesterday"> 昨日 </n-button>
                            </div>
                        </n-col>
                        <n-col :span="2">
                            <div class="xxJB">
                                <n-button text="true" @click="week"> 本周 </n-button>
                            </div>
                        </n-col>
                        <n-col :span="2">
                            <div class="xxJB">
                                <n-button text="true" @click="preweek"> 上周 </n-button>
                            </div>
                        </n-col>
                        <n-col :span="2">
                            <div class="xxJB">
                                <n-button text="true" @click="month"> 本月 </n-button>
                            </div>
                        </n-col>
                        <n-col :span="2">
                            <div class="xxJB">
                                <n-button text="true" @click="premonth"> 上月 </n-button>
                            </div>
                        </n-col>
                        <n-col :span="2">
                            <div class="xxJB">
                                <n-date-picker type="daterange" clearable />
                            </div>
                        </n-col>
                    </n-row>
                </n-col>
                <n-col :span="3" class="chaxun">
                    <n-button type="tertiary"> 查询 </n-button>
                </n-col>
            </n-row>
        </n-layout-content>
    </n-layout>
    <div style="width: 1100px; height: 500px" id="main"></div>
    <div style="width: 1100px; height: 500px;margin-top: 20px;" id="order"></div>
</template>


<style scoped>
.jinri {
    margin-left: -18px;
}

.n-layout-header {
    background-color: #e9eff5;
    height: 45px;
    padding: 15px;
}

.n-button {
    background-color: #fff;
}

.row {
    background-color: #fff;
    padding: 15px;
}

.shu {
    background-color: red;
}

.top_left {
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
}

.col_right {
    margin-left: 60px;
}

.green {
    height: 108px;
    background-color: rgba(0, 128, 0, 0.24);
    margin: 15px 0;
    border-radius: 5px;
    color: #fff;
}

.space {
    padding: 18px;
}

.font {
    font-size: 30px;
}

.n-date-picker {
    width: 300px;
}

.layout_content {
    padding: 20px 15px;
    line-height: 34px;
    border-bottom: 1px solid #ccc;
}

.chaxun {
    right: -187px;
}
</style>
